<template>
  <view class="container" :style="boxStyle">
    <view class="unit-item" @click="toBusinessCard">
      <view class="content">
        <view class="logo">
          <TImage
            :src="item?.logo"
            width="96rpx"
            height="96rpx"
            border-radius="50%"
            error-img-type="unit"
          />
          <image
            v-if="item?.authentication"
            class="authentication-icon"
            src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/member-icon-1.png"
          />
        </view>
        <view class="info">
          <view class="unit-name">
            <text class="ov-1">{{ item?.name || '暂无单位名称' }}</text>
            <view v-if="companyId === item?.id" class="tag">默认</view>
          </view>
          <view v-if="item?.position" class="unit-position">{{ item?.position }}</view>
        </view>
      </view>
      <view v-if="isEdit" class="handle">
        <view class="left">
          <template v-if="!isDefault && isShowSetDefault">
            <text>设置为默认</text>
            <FormSwitch :model-value="isDefault" @change="changeDefault" />
          </template>
        </view>
        <view class="right">
          <template v-if="item?.authentication">
            <view v-if="isEditBusinessCard" class="right-btn" @click.stop="toEditBusinessCard">
              编辑
            </view>
          </template>
          <template v-else>
            <view class="right-btn" @click.stop="toEdit">编辑</view>
            <view v-if="!isDefault" class="right-btn" style="margin-left: 32rpx" @click.stop="del">
              删除
            </view>
          </template>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { type PropType, computed } from 'vue';
  import TImage from '@/components/TImage/index.vue';
  import type { UnitListResult } from '@/api/mine/types';
  import { propTypes } from '@/utils/propTypes';
  import FormSwitch from '@/components/Form/components/FormSwitch.vue';
  import { useDebounceFn } from '@vueuse/core';
  import { setDefaultIdentity, unitDel } from '@/api/mine';
  import { Toast } from '@/utils';
  import { navigateTo } from '@/router';
  import { useUserStoreWithOut } from '@/store/modules/user';

  const useUser = useUserStoreWithOut();
  const props = defineProps({
    item: {
      type: Object as PropType<UnitListResult>,
      required: true,
    },
    index: propTypes.number,
    isShowSetDefault: propTypes.bool.def(true),
    companyId: propTypes.number,
    isEdit: propTypes.bool.def(true),
    isEditBusinessCard: propTypes.bool.def(false),
    boxStyle: propTypes.object,
  });

  const emit = defineEmits(['changeDefault', 'refresh']);

  const isDefault = computed(() => props.companyId === props.item?.id);

  const changeDefault = useDebounceFn(async (e: any) => {
    uni.showLoading({ title: '设置中...' });
    if (!props.item) return;
    const { id, name, position } = props.item;
    await setDefaultIdentity({ companyId: id, companyName: name, companyPositionName: position });
    emit('changeDefault', e.detail.value ? props.item?.id : undefined);
    uni.hideLoading();
  });

  function del() {
    uni.showModal({
      title: '删除单位',
      content: '删除后个人名片展示也将同步删除本单位信息！确定要删除本单位吗?',
      cancelText: '取消',
      cancelColor: '#999996',
      confirmText: '确定删除',
      confirmColor: '#EA5E0E',
      success: ({ confirm }) => {
        if (confirm) {
          props.item &&
            unitDel(props.item?.id).then((r) => {
              Toast('删除成功');
              emit('refresh');
            });
        }
      },
    });
  }

  function toBusinessCard() {
    props.item.authentication && navigateTo({ name: 'businessCard', options: {} });
  }

  function toEditBusinessCard() {
    navigateTo({
      name: 'editBusinessCard',
      options: {
        id: props.item.id,
        callback: () => useUser.setUserInfo(),
      },
    });
  }

  function toEdit() {
    navigateTo({
      name: 'editAffiliatedCompanies',
      options: {
        item: props.item,
        success: () => {
          if (isDefault.value) {
            useUser.setUserInfo();
          }
          emit('refresh');
        },
      },
    });
  }
</script>

<style lang="scss" scoped>
  .unit-item {
    .content {
      height: 152rpx;
      display: flex;
      align-items: center;
      .logo {
        width: 96rpx;
        margin-right: 24rpx;
        position: relative;
        border-radius: 50%;
        .authentication-icon {
          position: absolute;
          right: 0;
          bottom: 0;
          width: 30rpx;
          height: 30rpx;
        }
      }
      .info {
        height: 96rpx;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .unit-name {
          font-size: 32rpx;
          color: #333;
          display: flex;
          align-items: center;
          .tag {
            width: 72rpx;
            height: 40rpx;
            text-align: center;
            line-height: 40rpx;
            font-size: 24rpx;
            color: #2878ff;
            background-color: #d0f7ff;
            border-radius: 4rpx;
            margin-left: 16rpx;
            flex-shrink: 0;
          }
        }
        .unit-position {
          font-size: 28rpx;
          color: #999996;
        }
      }
    }
    .handle {
      height: 88rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: 0px 2rpx 0px 0px #ebedf0 inset;
      .left {
        color: #333333;
        font-size: 28rpx;
      }
      .right {
        display: flex;
        align-items: center;
        font-size: 28rpx;
        color: #666664;
        &-btn {
          width: 60rpx;
          height: 88rpx;
          text-align: center;
          line-height: 88rpx;
        }
      }
    }
  }
</style>
